<template>
  <div id="home">
     <navtabbar class="active">
    <template v-slot:centertabbar>  
    <div>购物街</div>
    </template>
    </navtabbar>
    <tabcontrol :titles = "['流行','新款','精选']" ref="tabControl1" @tabchange= "tabchange" class="fixed" v-show= "istabshow">
    </tabcontrol>
   <bscroll class="content" ref="scroll" :probetype = '3' @scroll = "backtop" :pullupload= "true" 
   @pullingUp = "loadmore">
      <child-swiper :banner = "banners" @swiperload = 'imgshow'></child-swiper>
    <recomend-view :recomends = "recommends"></recomend-view>
    <feature></feature>
    <tabcontrol :titles = "['流行','新款','精选']" ref="tabControl2" @tabchange= "tabchange" ></tabcontrol>
    <homegoods :good= "showgoods"></homegoods>
   </bscroll>
   <backtop @click.native= "topclick" v-show= "isshowbacktop"></backtop>
  </div>
</template>

<script>
import bscroll from '../../src/components/common/BScroll/bscroll.vue'
import backtop from '../../src/components/common/BackTop/backtop.vue'
import navtabbar from '@/components/common/navtabbarcommon/navtabbar'
import childSwiper  from './childrencomponents/childSwiper.vue'
import recomendView from './RecomendCom/RecomendView.vue'
import feature from './Feature/feature.vue'
import tabcontrol from './Tabcontrol/tabcontrol.vue'
import homegoods from '../../src/components/content/goods/Homegoods.vue'
import {getHomeMultidata,getHomeGoods} from '../../network/home';

export default {
    name:'home',
    data () {
      return {
        banners:[],
        recommends:[],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]}
        },
        currenttype:'pop',
        isshowbacktop: false,
        istabshow:false,
        istabTop:0,
        leavetop:0
      }
    },
    components: {
      navtabbar,
      childSwiper,
      recomendView,
      feature,
      tabcontrol,
      homegoods,
      bscroll,
      backtop,
    },
    created () {
      this.getHomeMultidata()

      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    activated () {
      this.$refs.scroll.scroll.scrollTo(0,this.leavetop,0)
      this.$refs.scroll.scroll.refresh
    },
    deactivated () {
      this.leavetop = this.$refs.scroll.getScrollY()
    },
    methods: {
      // 以下是方法
      tabchange(index){
        switch(index){
          case 0:
            this.currenttype = 'pop'
            break;
          case 1:
            this.currenttype = 'new'
            break
          case 2:
            this.currenttype = 'sell' 
        }
        this.$refs.tabControl1.currentindex = index
        this.$refs.tabControl2.currentindex = index
      },
       imgshow(){
        // console.log(this.$refs.tabControl.$el.offsetTop);
        this.istabTop = this.$refs.tabControl2.$el.offsetTop
      },
      topclick(){
        this.$refs.scroll.scroll.scrollTo(0,0,500)
      },
      backtop(position){
        this.isshowbacktop = (-position.y) > 1000
        this.istabshow = (-position.y) > this.istabTop
      },
      loadmore(){
        // console.log('11');
        this.getHomeGoods(this.currenttype)
        this.$refs.scroll.scroll.refresh()
      },
      // 以下是网络请求的方法
      getHomeMultidata(){
        getHomeMultidata().then(res=>{
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
      })
      },
      getHomeGoods(type){
        const page = this.goods[type].page + 1
        getHomeGoods(type,page).then(res=>{
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page +=1

          this.$refs.scroll.scroll.finishPullUp()
        })
      }
    },
    computed: {
      showgoods(){
        return this.goods[this.currenttype].list
      }
    }
    
}
</script>

<style scoped>

.active{
  background-color: salmon;
  color: white;
  position: fixed;
  right: 0;
  z-index: 9;
  left: 0;
  top: 0;
}

#home{
  padding-top: 44px;
  height: 100vh;
  position: relative;
  
}

/* .tabcontrol{
    position: sticky;
    top: 44px;
} */

.content{
  /* height: 300px; */
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  right: 0;
  left: 0;
}

.fixed{
  position: relative;
  z-index: 9;
}
</style>